<template>
  <view class="container">
    <cu-custom bgColor="bg-blue" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">审批申请</block>
    </cu-custom>

    <view class="bg-top bg-blue">
      <view class="top-box shadow">
        <view class="cu-list menu">
          <!-- 申请内容 -->
          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-writefill text-mauve margin-right-xs"></text>
              <text class="text-black">申请内容</text>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="action">
              <u-input
                type="textarea"
                style="width: 600rpx; word-break: break-all"
                :maxlength="500"
                class="text-sm u-font-28"
                v-model="permission.content"
                placeholder="请输入需要申请的内容"
                name="input"
              ></u-input>
            </view>
          </view>

          <!-- 申请时间 -->
          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-timefill text-orange margin-right-xs"></text>
              <text class="text-black">申请时间</text>
            </view>
            <view class="action">
              <view @tap="timeShow = true" class="cu-tag round bg-orange light">{{ permission.createTime }}</view>
            </view>
          </view>

          <!-- 时间选择 -->
          <u-picker
            title="申请时间"
            mode="time"
            v-model="timeShow"
            :params="params"
            :default-time="permission.createTime"
            end-year="2099"
            @confirm="timeConfirm"
          ></u-picker>
        </view>
      </view>

      <!-- 提交申请 -->
      <view class="padding-lr flex margin-top-sm" style="justify-content: space-between; width: 750rpx">
        <button class="submit" :style="[inputStyle]" @tap="submit" style="width: 100%">提交申请</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      permission: {
        content: '',
        createTime: ''
      },
      timeShow: false,
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
        timestamp: true
      },
      confirmIndex: 0
    }
  },
  computed: {
    inputStyle() {
      let style = {}
      if (this.permission.content && this.confirmIndex == 0) {
        style.color = '#fff'
        style.backgroundColor = this.$u.color['primary']
      }
      return style
    }
  },
  onLoad() {
    this.getCreateTime()
  },
  methods: {
    /**
     * 获取当前 年月日
     */
    async getCreateTime() {
      var dt = new Date()
      let year = dt.getFullYear()
      let month = (dt.getMonth() + 1).toString().padStart(2, '0')
      let date = dt.getDate().toString().padStart(2, '0')
      let hours = dt.getHours().toString().padStart(2, '0') //获取当前时间的小时
      let minutes = dt.getMinutes().toString().padStart(2, '0') //获取当前时间的分数
      let seconds = dt.getSeconds().toString().padStart(2, '0') //获取当前时间的秒数

      this.permission.createTime = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
    },
    /**
     * 时间赋值
     * @param {Object} e
     */
    timeConfirm(e) {
      let input = ''
      if (this.params.year) input += e.year
      if (this.params.month) input += '-' + e.month
      if (this.params.day) input += '-' + e.day
      if (this.params.hour) input += ' ' + e.hour
      if (this.params.minute) input += ':' + e.minute
      if (this.params.second) input += ':' + e.second

      this.permission.createTime = input
    },
    async submit() {
      if (!this.permission) return

      if (!this.permission.content) {
        return
      }
      if (!this.confirmIndex == 0) {
        return
      }

      // 设置不能再次点击 2秒后恢复
      this.confirmIndex += 1
      setTimeout(() => {
        this.confirmIndex = 0
      }, 2000)

      await this.$u.api.addPermissionRecord(this.permission)
      this.$u.toast('提交成功')

      // 获取所有的审核人的clientId
      const res = await this.$u.api.getClientIdsByRoleId(this.vuex_user.id)
      // 推送消息
      let title = '新申请单'
      let content = '[' + this.vuex_user.realname + '] 提交了一个申请，请及时审批！'
      // await this.$u.utils.appPushInfo(res, title, content);

      // 新增通知消息
      const res2 = await this.$u.api.getParentRoleIdByRoleId(this.vuex_user.id)
      let data = JSON.parse(JSON.stringify(res2))
      data.forEach((item, index) => {
        let params = {
          type: 1,
          title: title,
          content: content,
          roleId: item
        }
        this.$u.api.addMessageNotification(params)
      })

      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        })
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 750rpx;
  color: #333333;

  .bg-top {
    margin-top: -1rpx;
    width: 750rpx;
    height: 220rpx;
    padding-top: 50rpx;
    border-radius: 0 0 20% 20%;

    .top-box {
      width: 700rpx;
      background-color: #ffffff;
      margin: 0 auto;
      border-radius: 20rpx;
      padding: 20rpx 30rpx 0rpx;
      position: relative;

      .qh-title {
        width: 100%;
        height: 60rpx;
        line-height: 65rpx;
      }
    }
  }

  .submit {
    background-color: #ecf5ff;
    color: $u-tips-color;
    border: none;
    border-radius: 10px;
    font-size: 30rpx;

    &::after {
      border: none;
    }
  }
}
</style>
